import { ModalForm, ProFormText } from '@ant-design/pro-components';

type modelProps = {
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
};

export default function BlockChainModel({
  visible,
  onVisibleChange,
}: modelProps) {
  return (
    <>
      <ModalForm
        title="溯源详情"
        open={visible}
        onOpenChange={onVisibleChange}
        width={'45vw'}
      >
        <div style={{ display: 'flex', marginTop: '10px' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>预制菜名:</span>
          <ProFormText disabled placeholder="预制菜A" />
          <span style={{ margin: '5px 10px 0px 10px' }}>预制菜生产日期:</span>
          <ProFormText disabled placeholder="预制菜A" />
        </div>

        <div style={{ display: 'flex' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>包装批次:</span>
          <ProFormText disabled placeholder="20220101" />
          <span style={{ margin: '5px 10px 0px 10px' }}>包装时间:</span>
          <ProFormText disabled placeholder="2022-01-01" />
          <span style={{ margin: '5px 10px 0px 10px' }}>包装车间:</span>
          <ProFormText disabled placeholder="A车间" />
        </div>
        <div style={{ display: 'flex' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>包装负责人:</span>
          <ProFormText disabled placeholder="张三" />
        </div>

        <div style={{ display: 'flex', marginTop: '10px' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>质检批次:</span>
          <ProFormText disabled placeholder="20220101" />
          <span style={{ margin: '5px 10px 0px 10px' }}>合格情况:</span>
          <ProFormText disabled placeholder="合格" />
          <span style={{ margin: '5px 10px 0px 10px' }}>质检车间:</span>
          <ProFormText disabled placeholder="A车间" />
        </div>

        <div style={{ display: 'flex' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>质检人员:</span>
          <ProFormText disabled placeholder="李四" />
          <span style={{ margin: '5px 10px 0px 10px' }}>质检时间:</span>
          <ProFormText disabled placeholder="	2022-01-01" />
          <span style={{ margin: '5px 10px 0px 10px' }}>反工原因:</span>
          <ProFormText disabled placeholder="无" />
        </div>

        <div style={{ display: 'flex' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>质检人员:</span>
          <ProFormText disabled placeholder="李四" />
          <span style={{ margin: '5px 10px 0px 10px' }}>质检时间:</span>
          <ProFormText disabled placeholder="	2022-01-01" />
          <span style={{ margin: '5px 10px 0px 10px' }}>反工原因:</span>
          <ProFormText disabled placeholder="无" />
        </div>

        <div style={{ display: 'flex', marginTop: '20px' }}>
          <span style={{ margin: '5px 10px 0px 10px' }}>销售批次:</span>
          <ProFormText disabled placeholder="1234783289" />
          <span style={{ margin: '5px 10px 0px 10px' }}>销售时间:</span>
          <ProFormText disabled placeholder="2022-01-01" />
          <span style={{ margin: '5px 10px 0px 10px' }}>批次数量:</span>
          <ProFormText disabled placeholder="2" />
        </div>
      </ModalForm>
    </>
  );
}
